<template>
    <el-card style="margin-top: 10px">
        <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
            <el-tab-pane label="综合排序" name="first" >
                <div v-loading="loading" class="content-item">
                    <div class="content-item-com">
                        <img style="width: 210px;height: 140px" src="https://rs.dance365.com/photo/8fd087a700da8604a34262e9befd1da4.jpg" alt="">
                        <div style="margin: 0 10px;height: 130px">
                            <div style="margin: 5px 0; font-size: 14px">零基础古典舞身韵组合</div>
                            <div style=" width:180px;display: flex;justify-content: space-between;font-size: 12px">
                                <div>￥ 58.00</div>
                                <div>19.7W人浏览</div>
                            </div>
                            <div><img src="https://rs.dance365.com/vip_free@3x.png" alt="" style="width: 50px;height: 20px;"></div>
                            <div style="display: flex;margin:5px 0 0 0">
                                <svg class="icon" aria-hidden="true" >
                                    <use xlink:href="#icon-dianzan"></use>
                                </svg>
                                <div style="width: 40px;"></div>
                                <svg class="icon" aria-hidden="true">
                                    <use xlink:href="#icon-xiaoxi"></use>
                                </svg>
                                <div style="width: 40px;"></div>
                                <div><el-icon color="yellow"><Star /></el-icon></div>
                                <div style="width: 40px"></div>
                            </div>
                            <div style="border-top: solid black 1px;font-size: 12px;margin-top: 5px;display: flex;justify-content: space-between;align-items: center;padding: 15px 0">
                                <img style="width: 30px;height: 30px;border-radius: 50%" src="https://rs.dance365.com/photo/38fa4676-8435-45fc-a422-c43a72761428.jpg?imageView2/0/w/100/h/100/format/webp/ignore-error/1" alt="">
                                <span>胡双舞蹈</span>
                                <sapn>20-04-07</sapn>
                            </div>
                        </div>
                    </div>
                    <div class="content-item-com"></div>
                    <div class="content-item-com"></div>
                    <div class="content-item-com"></div>
                    <div class="content-item-com"></div>
                    <div class="content-item-com"></div>
                </div>
            </el-tab-pane>
            <el-tab-pane label="销量" name="second">
                <div  v-loading="loading" class="content-item">
                    销量
                </div>
            </el-tab-pane>
            <el-tab-pane label="浏览量" name="third">
                <div v-loading="loading" class="content-item">
                    浏览量
                </div>
            </el-tab-pane>
            <el-tab-pane  name="fourth">
                <template  #label>
                    <el-popover v-model:visible="visible" placement="top" :width="160" >
                        <el-button style="border: 0;margin-left: 13px">价格由低到高</el-button>
                        <el-button style="border: 0;margin-left: 13px">价格由高到低</el-button>
                        <template #reference>
                            <el-button @click="visible = true" style="border: 0;font-size: 17px">
                                价格
                                <el-icon class="el-icon--right">
                                    <arrow-down/>
                                </el-icon>
                            </el-button>
                        </template>
                    </el-popover>
                </template>
                <div v-loading="loading" class="content-item">价格</div>
            </el-tab-pane>
        </el-tabs>
    </el-card>
</template>
<script lang="ts">
export default {
    name: "ContentItem"
}
</script>
<script setup lang="ts">
import { ArrowDown,Star } from '@element-plus/icons-vue'
import type {TabsPaneContext} from "element-plus";
import {ref} from "_vue@3.2.39@vue";
const visible=ref(false)

const activeName=ref('first')
const loading=ref(false)
const handleClick = (tab: TabsPaneContext, event: Event) => {
    // if(loading.value=true){
    //
    // }
    loading.value=true
    console.log(tab, event)
    setTimeout(()=>{
        loading.value=false
    },2000)
}
</script>

<style scoped>

</style>
